<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业官网UI设计 - 威客任务详情</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #165DFF;
            --primary-light: #E8F3FF;
            --success: #36D399;
            --warning: #FBBD23;
            --danger: #F87272;
            --dark: #1D2939;
            --light: #F9FAFB;
            --gray: #667085;
            --border: #E5E7EB;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: var(--light);
            color: var(--dark);
            line-height: 1.6;
            padding-top: 20px;
            padding-bottom: 60px;
        }
        
        .container {
            max-width: 1200px;
        }
        
        .page-header {
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }
        
        .breadcrumb {
            --bs-breadcrumb-divider: '>';
            margin-bottom: 0.5rem;
        }
        
        .page-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        /* 任务详情卡片 */
        .task-detail-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: var(--shadow);
            overflow: hidden;
            margin-bottom: 2rem;
        }
        
        .task-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border);
        }
        
        .task-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        
        .task-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-bottom: 1rem;
            color: var(--gray);
            font-size: 0.95rem;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .task-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        
        .task-tag {
            background-color: var(--primary-light);
            color: var(--primary);
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 0.85rem;
        }
        
        /* 任务内容区 */
        .task-content {
            padding: 1.5rem;
            display: flex;
            gap: 2rem;
        }
        
        .task-main {
            flex: 3;
        }
        
        .task-sidebar {
            flex: 1;
        }
        
        .section-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--border);
        }
        
        .task-description {
            margin-bottom: 2rem;
            line-height: 1.8;
        }
        
        .task-requirements {
            margin-bottom: 2rem;
        }
        
        .requirements-list {
            padding-left: 1.5rem;
        }
        
        .requirements-list li {
            margin-bottom: 0.75rem;
        }
        
        .task-images {
            margin-bottom: 2rem;
        }
        
        .image-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .gallery-image {
            border-radius: 8px;
            overflow: hidden;
            height: 160px;
            cursor: pointer;
            position: relative;
        }
        
        .gallery-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }
        
        .gallery-image:hover img {
            transform: scale(1.05);
        }
        
        .gallery-image .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .gallery-image:hover .image-overlay {
            opacity: 1;
        }
        
        /* 侧边栏样式 */
        .sidebar-section {
            background-color: var(--light);
            border-radius: 8px;
            padding: 1.25rem;
            margin-bottom: 1.5rem;
        }
        
        .price-card {
            text-align: center;
            padding: 1.5rem 1rem;
            background-color: var(--primary-light);
            border-radius: 8px;
            margin-bottom: 1.5rem;
        }
        
        .price-amount {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }
        
        .price-label {
            color: var(--gray);
            font-size: 0.9rem;
        }
        
        .action-buttons {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }
        
        .btn-primary {
            background-color: var(--primary);
            border-color: var(--primary);
            padding: 10px 16px;
            font-weight: 500;
            border-radius: 6px;
            transition: all 0.2s;
        }
        
        .btn-primary:hover {
            background-color: #0E42D2;
            border-color: #0E42D2;
        }
        
        .btn-secondary {
            background-color: white;
            border: 1px solid var(--border);
            color: var(--dark);
            padding: 10px 16px;
            font-weight: 500;
            border-radius: 6px;
            transition: all 0.2s;
        }
        
        .btn-secondary:hover {
            background-color: var(--light);
        }
        
        .info-list {
            margin-bottom: 1rem;
        }
        
        .info-item {
            display: flex;
            margin-bottom: 0.75rem;
            font-size: 0.95rem;
        }
        
        .info-label {
            flex: 0 0 90px;
            color: var(--gray);
        }
        
        .info-value {
            flex: 1;
        }
        
        /* 雇主信息 */
        .employer-info {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            border-radius: 8px;
            background-color: white;
            border: 1px solid var(--border);
            margin-bottom: 1.5rem;
        }
        
        .employer-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .employer-details {
            flex: 1;
        }
        
        .employer-name {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        
        .employer-rating {
            color: var(--warning);
            margin-bottom: 0.25rem;
        }
        
        .employer-meta {
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .verified-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: var(--primary);
            font-size: 0.85rem;
            margin-left: 0.5rem;
        }
        
        /* 投标区域 */
        .bids-section {
            margin-bottom: 2rem;
        }
        
        .bids-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .bids-count {
            color: var(--gray);
            font-size: 0.95rem;
        }
        
        .bid-card {
            background-color: white;
            border-radius: 8px;
            border: 1px solid var(--border);
            padding: 1.25rem;
            margin-bottom: 1rem;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .bid-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow);
        }
        
        .bid-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
        }
        
        .bidder-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .bidder-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .bidder-details {
            display: flex;
            flex-direction: column;
        }
        
        .bidder-name {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .bidder-rating {
            color: var(--warning);
            font-size: 0.85rem;
        }
        
        .bid-amount {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--primary);
        }
        
        .bid-content {
            margin-bottom: 1rem;
            font-size: 0.95rem;
        }
        
        .bid-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            color: var(--gray);
            font-size: 0.85rem;
            margin-bottom: 1rem;
        }
        
        .bid-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
        }
        
        .btn-sm {
            padding: 4px 12px;
            font-size: 0.85rem;
        }
        
        /* 留言区域 */
        .messages-section {
            margin-bottom: 2rem;
        }
        
        .message-form {
            background-color: white;
            border-radius: 8px;
            border: 1px solid var(--border);
            padding: 1.25rem;
            margin-bottom: 1.5rem;
        }
        
        .form-control {
            border-color: var(--border);
            border-radius: 6px;
            padding: 10px 12px;
            margin-bottom: 1rem;
        }
        
        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
            outline: none;
        }
        
        .message-card {
            background-color: white;
            border-radius: 8px;
            border: 1px solid var(--border);
            padding: 1.25rem;
            margin-bottom: 1.5rem;
        }
        
        .message-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.75rem;
        }
        
        .message-author {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .author-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .message-time {
            color: var(--gray);
            font-size: 0.85rem;
        }
        
        .message-content {
            margin-bottom: 1rem;
            font-size: 0.95rem;
        }
        
        .message-actions {
            display: flex;
            gap: 1rem;
        }
        
        .action-link {
            color: var(--gray);
            font-size: 0.85rem;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: color 0.2s;
        }
        
        .action-link:hover {
            color: var(--primary);
        }
        
        /* 回复区域 */
        .replies-container {
            margin-left: 2rem;
            padding-left: 1rem;
            border-left: 2px solid var(--primary-light);
        }
        
        .reply-card {
            background-color: var(--light);
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1rem;
        }
        
        .reply-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }
        
        .reply-author {
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .reply-time {
            color: var(--gray);
            font-size: 0.8rem;
        }
        
        .reply-content {
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }
        
        .reply-actions {
            display: flex;
            gap: 1rem;
        }
        
        .reply-form {
            margin-top: 1rem;
            margin-bottom: 1rem;
        }
        
        /* 投标模态框样式 */
        .modal-content {
            border-radius: 10px;
            border: none;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .modal-header {
            border-bottom: 1px solid var(--border);
            padding: 1.25rem 1.5rem;
        }
        
        .modal-title {
            font-size: 1.25rem;
            font-weight: 600;
        }
        
        .modal-body {
            padding: 1.5rem;
        }
        
        .modal-footer {
            border-top: 1px solid var(--border);
            padding: 1rem 1.5rem;
            display: flex;
            gap: 1rem;
        }
        
        .form-group {
            margin-bottom: 1.25rem;
        }
        
        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .task-content {
                flex-direction: column;
                gap: 1.5rem;
            }
            
            .task-sidebar {
                order: -1;
            }
            
            .image-gallery {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }
            
            .gallery-image {
                height: 120px;
            }
        }
        
        @media (max-width: 576px) {
            .task-meta {
                gap: 1rem;
            }
            
            .bids-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }
            
            .bid-header {
                flex-direction: column;
                gap: 0.75rem;
            }
            
            .bid-actions {
                flex-direction: column;
            }
            
            .image-gallery {
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面标题和导航 -->
        <div class="page-header">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-gray">首页</a></li>
                    <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-gray">任务列表</a></li>
                    <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-gray">设计类</a></li>
                    <li class="breadcrumb-item active" aria-current="page">企业官网UI设计</li>
                </ol>
            </nav>
            <h1 class="page-title">企业官网UI设计，需要现代简约风格</h1>
        </div>
        
        <!-- 任务详情卡片 -->
        <div class="task-detail-card">
            <div class="task-header">
                <div class="task-meta">
                    <div class="meta-item">
                        <i class="far fa-clock text-primary"></i>
                        <span>发布于 3天前</span>
                    </div>
                    <div class="meta-item">
                        <i class="far fa-eye text-primary"></i>
                        <span>浏览 245 次</span>
                    </div>
                    <div class="meta-item">
                        <i class="far fa-comment text-primary"></i>
                        <span>32 条留言</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-user-check text-primary"></i>
                        <span>18 人已投标</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-hourglass-half text-primary"></i>
                        <span>剩余 7 天</span>
                    </div>
                </div>
                
                <div class="task-tags">
                    <span class="task-tag">UI设计</span>
                    <span class="task-tag">网站</span>
                    <span class="task-tag">现代风格</span>
                    <span class="task-tag">企业官网</span>
                    <span class="task-tag">中等难度</span>
                </div>
            </div>
            
            <div class="task-content">
                <div class="task-main">
                    <div class="task-description">
                        <h2 class="section-title">任务描述</h2>
                        <p>我们需要为新成立的科技公司设计企业官网UI，要求现代简约风格，具有科技感和专业性。网站需要包含以下几个主要板块：</p>
                        <p>1. 首页Banner：需要突出公司核心业务和价值主张，具有视觉冲击力</p>
                        <p>2. 关于我们：公司简介、团队介绍和发展历程</p>
                        <p>3. 产品服务：展示我们的主要产品和服务内容</p>
                        <p>4. 案例展示：过往成功案例展示</p>
                        <p>5. 联系我们：包含联系表单和联系方式</p>
                        <p>设计需考虑响应式布局，确保在移动设备上有良好的显示效果。色彩方案以蓝色为主色调，体现科技感和专业性。</p>
                    </div>
                    
                    <div class="task-requirements">
                        <h2 class="section-title">具体要求</h2>
                        <ul class="requirements-list">
                            <li>提供至少3个不同的首页设计方案供选择</li>
                            <li>完成所有主要页面的UI设计</li>
                            <li>提供设计源文件（Figma或PSD格式）</li>
                            <li>提供切图和设计规范文档</li>
                            <li>需要在15天内完成所有设计工作</li>
                            <li>有科技类企业官网设计经验者优先</li>
                        </ul>
                    </div>
                    
                    <div class="task-images">
                        <h2 class="section-title">参考图片 <span class="text-gray fs-6">(3张)</span></h2>
                        <div class="image-gallery">
                            <div class="gallery-image">
                                <img src="https://picsum.photos/400/300?random=1" alt="参考设计图片1">
                                <div class="image-overlay">
                                    <i class="fas fa-search-plus"></i>
                                </div>
                            </div>
                            <div class="gallery-image">
                                <img src="https://picsum.photos/400/300?random=2" alt="参考设计图片2">
                                <div class="image-overlay">
                                    <i class="fas fa-search-plus"></i>
                                </div>
                            </div>
                            <div class="gallery-image">
                                <img src="https://picsum.photos/400/300?random=3" alt="参考设计图片3">
                                <div class="image-overlay">
                                    <i class="fas fa-search-plus"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 投标区域 -->
                    <div class="bids-section">
                        <div class="bids-header">
                            <h2 class="section-title">投标列表</h2>
                            <div class="bids-count">共收到 18 份投标</div>
                        </div>
                        
                        <!-- 投标1 -->
                        <div class="bid-card">
                            <div class="bid-header">
                                <div class="bidder-info">
                                    <img src="https://picsum.photos/100/100?random=10" alt="设计师小王的头像" class="bidder-avatar">
                                    <div class="bidder-details">
                                        <div class="bidder-name">设计师小王</div>
                                        <div class="bidder-rating">
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star-half-alt"></i>
                                            <span class="ms-1 text-gray">4.8 (126条评价)</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="bid-amount">￥750</div>
                            </div>
                            
                            <div class="bid-content">
                                我是一名有5年经验的UI设计师，专注于企业官网设计。熟悉现代简约风格，曾为多家科技公司设计过官网，能够满足您的需求。可以在10天内完成所有设计工作，提供3个首页方案供选择。
                            </div>
                            
                            <div class="bid-meta">
                                <div class="meta-item">
                                    <i class="far fa-clock"></i>
                                    <span>2天前投标</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-calendar-check"></i>
                                    <span>预计完成时间：10天</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-file-alt"></i>
                                    <span>2个作品集</span>
                                </div>
                            </div>
                            
                            <div class="bid-actions">
                                <button class="btn btn-secondary btn-sm">查看详情</button>
                                <button class="btn btn-primary btn-sm">联系设计师</button>
                            </div>
                        </div>
                        
                        <!-- 投标2 -->
                        <div class="bid-card">
                            <div class="bid-header">
                                <div class="bidder-info">
                                    <img src="https://picsum.photos/100/100?random=11" alt="创意工作室的头像" class="bidder-avatar">
                                    <div class="bidder-details">
                                        <div class="bidder-name">创意工作室</div>
                                        <div class="bidder-rating">
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <span class="ms-1 text-gray">5.0 (89条评价)</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="bid-amount">￥900</div>
                            </div>
                            
                            <div class="bid-content">
                                我们是专业的设计团队，有丰富的科技企业官网设计经验。可以提供完整的UI设计方案，包括响应式设计和交互原型。会根据您的品牌定位定制设计风格，确保网站视觉效果出众。
                            </div>
                            
                            <div class="bid-meta">
                                <div class="meta-item">
                                    <i class="far fa-clock"></i>
                                    <span>1天前投标</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-calendar-check"></i>
                                    <span>预计完成时间：12天</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-file-alt"></i>
                                    <span>5个作品集</span>
                                </div>
                            </div>
                            
                            <div class="bid-actions">
                                <button class="btn btn-secondary btn-sm">查看详情</button>
                                <button class="btn btn-primary btn-sm">联系设计师</button>
                            </div>
                        </div>
                        
                        <button class="btn btn-secondary w-100">查看更多投标</button>
                    </div>
                    
                    <!-- 留言区域 -->
                    <div class="messages-section">
                        <h2 class="section-title">留言与交流</h2>
                        
                        <!-- 留言表单 -->
                        <div class="message-form">
                            <div class="form-group">
                                <label class="form-label">发表留言</label>
                                <textarea class="form-control" placeholder="请输入您想咨询的问题或留言..."></textarea>
                            </div>
                            <button class="btn btn-primary">发送留言</button>
                        </div>
                        
                        <!-- 留言1 -->
                        <div class="message-card">
                            <div class="message-header">
                                <div class="message-author">
                                    <img src="https://picsum.photos/100/100?random=20" alt="李设计师的头像" class="author-avatar">
                                    <div class="author-name">李设计师</div>
                                </div>
                                <div class="message-time">2天前</div>
                            </div>
                            
                            <div class="message-content">
                                您好，我想了解一下贵公司是否有品牌VI系统？设计时是否需要遵循现有的品牌规范？另外，网站预计有多少个页面需要设计？
                            </div>
                            
                            <div class="message-actions">
                                <a href="#" class="action-link">
                                    <i class="far fa-thumbs-up"></i>
                                    <span>3</span>
                                </a>
                                <a href="#" class="action-link reply-btn">
                                    <i class="far fa-reply"></i>
                                    <span>回复</span>
                                </a>
                            </div>
                            
                            <!-- 回复区域 -->
                            <div class="replies-container">
                                <!-- 回复1 -->
                                <div class="reply-card">
                                    <div class="reply-header">
                                        <div class="reply-author">张先生 <span class="text-primary">(雇主)</span></div>
                                        <div class="reply-time">1天前</div>
                                    </div>
                                    
                                    <div class="reply-content">
                                        您好，我们目前还没有正式的VI系统，设计时可以自由发挥，但希望以蓝色为主色调。网站预计有5-6个主要页面，具体可以在确定合作后详细沟通。
                                    </div>
                                    
                                    <div class="reply-actions">
                                        <a href="#" class="action-link">
                                            <i class="far fa-thumbs-up"></i>
                                            <span>1</span>
                                        </a>
                                        <a href="#" class="action-link reply-btn">
                                            <i class="far fa-reply"></i>
                                            <span>回复</span>
                                        </a>
                                    </div>
                                </div>
                                
                                <!-- 回复表单 -->
                                <div class="reply-form d-none">
                                    <textarea class="form-control" placeholder="请输入您的回复..."></textarea>
                                    <div class="d-flex gap-2">
                                        <button class="btn btn-primary btn-sm">发送回复</button>
                                        <button class="btn btn-secondary btn-sm cancel-reply">取消</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 留言2 -->
                        <div class="message-card">
                            <div class="message-header">
                                <div class="message-author">
                                    <img src="https://picsum.photos/100/100?random=21" alt="王设计的头像" class="author-avatar">
                                    <div class="author-name">王设计</div>
                                </div>
                                <div class="message-time">3天前</div>
                            </div>
                            
                            <div class="message-content">
                                我有丰富的企业官网设计经验，能否提供一些你们喜欢的参考网站或设计风格？这样我可以更准确地把握你们的需求。
                            </div>
                            
                            <div class="message-actions">
                                <a href="#" class="action-link">
                                    <i class="far fa-thumbs-up"></i>
                                    <span>5</span>
                                </a>
                                <a href="#" class="action-link reply-btn">
                                    <i class="far fa-reply"></i>
                                    <span>回复</span>
                                </a>
                            </div>
                            
                            <!-- 回复区域 -->
                            <div class="replies-container">
                                <!-- 回复1 -->
                                <div class="reply-card">
                                    <div class="reply-header">
                                        <div class="reply-author">张先生 <span class="text-primary">(雇主)</span></div>
                                        <div class="reply-time">3天前</div>
                                    </div>
                                    
                                    <div class="reply-content">
                                        您好，我们比较喜欢苹果官网和谷歌的设计风格，简洁、现代、注重留白。我已经上传了几张参考图片，您可以参考一下。
                                    </div>
                                    
                                    <div class="reply-actions">
                                        <a href="#" class="action-link">
                                            <i class="far fa-thumbs-up"></i>
                                            <span>2</span>
                                        </a>
                                        <a href="#" class="action-link reply-btn">
                                            <i class="far fa-reply"></i>
                                            <span>回复</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <button class="btn btn-secondary w-100">查看更多留言</button>
                    </div>
                </div>
                
                <div class="task-sidebar">
                    <!-- 价格卡片 -->
                    <div class="price-card">
                        <div class="price-amount">￥800</div>
                        <div class="price-label">固定预算</div>
                    </div>
                    
                    <!-- 操作按钮 -->
                    <div class="action-buttons">
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#bidModal">
                            <i class="fas fa-gavel me-2"></i>我要投标
                        </button>
                        <button class="btn btn-secondary">
                            <i class="far fa-bookmark me-2"></i>收藏任务
                        </button>
                        <button class="btn btn-secondary">
                            <i class="far fa-share-alt me-2"></i>分享任务
                        </button>
                    </div>
                    
                    <!-- 任务信息 -->
                    <div class="sidebar-section">
                        <h3 class="section-title">任务信息</h3>
                        <div class="info-list">
                            <div class="info-item">
                                <div class="info-label">任务分类</div>
                                <div class="info-value">设计类 > UI设计</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">任务状态</div>
                                <div class="info-value">可接取</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">发布时间</div>
                                <div class="info-value">2023-06-15</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">截止时间</div>
                                <div class="info-value">2023-06-29</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">任务周期</div>
                                <div class="info-value">15天</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">服务模式</div>
                                <div class="info-value">固定价格</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">保证金</div>
                                <div class="info-value">已托管</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 雇主信息 -->
                    <div class="sidebar-section">
                        <h3 class="section-title">雇主信息</h3>
                        <div class="employer-info">
                            <img src="https://picsum.photos/100/100?random=101" alt="张先生的头像" class="employer-avatar">
                            <div class="employer-details">
                                <div class="employer-name">
                                    张先生
                                    <span class="verified-badge">
                                        <i class="fas fa-check-circle"></i>
                                        已认证
                                    </span>
                                </div>
                                <div class="employer-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <span class="ms-1 text-gray">5.0 (12条评价)</span>
                                </div>
                                <div class="employer-meta">
                                    <span>企业雇主</span> · 
                                    <span>发布15个任务</span> · 
                                    <span>注册1年</span>
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-secondary w-100">查看雇主主页</button>
                    </div>
                    
                    <!-- 安全提示 -->
                    <div class="sidebar-section" style="background-color: #FFF8E6; border: 1px solid #FFE8CC;">
                        <h3 class="section-title" style="color: #E67700;">
                            <i class="fas fa-shield-alt me-2"></i>安全提示
                        </h3>
                        <ul class="requirements-list" style="font-size: 0.9rem;">
                            <li>请通过平台进行交易，保障资金安全</li>
                            <li>切勿直接向对方转账或提供银行卡信息</li>
                            <li>如遇虚假任务或诈骗，请立即举报</li>
                        </ul>
                        <button class="btn btn-secondary btn-sm w-100">查看安全交易指南</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 投标模态框 -->
    <div class="modal fade" id="bidModal" tabindex="-1" aria-labelledby="bidModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bidModalLabel">参与任务投标</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="bidForm">
                        <div class="form-group">
                            <label class="form-label" for="bidAmount">投标金额 (元)</label>
                            <input type="number" class="form-control" id="bidAmount" min="1" placeholder="请输入您的报价">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label" for="deliveryTime">预计完成时间</label>
                            <select class="form-control" id="deliveryTime">
                                <option value="">请选择完成时间</option>
                                <option value="3">3天内</option>
                                <option value="7">7天内</option>
                                <option value="10">10天内</option>
                                <option value="15">15天内</option>
                                <option value="30">30天内</option>
                                <option value="custom">自定义</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label" for="bidDescription">投标说明</label>
                            <textarea class="form-control" id="bidDescription" placeholder="请详细描述您的解决方案、相关经验和优势..."></textarea>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">上传作品集 (可选)</label>
                            <div class="input-group mb-3">
                                <input type="file" class="form-control" id="portfolioFiles" multiple>
                                <label class="input-group-text" for="portfolioFiles">上传</label>
                            </div>
                            <small class="text-gray">支持上传图片、PDF文件，最多5个文件</small>
                        </div>
                        
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="agreeTerms">
                            <label class="form-check-label" for="agreeTerms">
                                我已阅读并同意<a href="#" class="text-primary">《投标服务协议》</a>和<a href="#" class="text-primary">《平台交易规则》</a>
                            </label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary">提交投标</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 图片预览模态框 -->
    <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">图片预览</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body d-flex justify-content-center align-items-center">
                    <img id="previewImage" src="" alt="图片预览" class="img-fluid">
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 回复功能
        document.querySelectorAll('.reply-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 找到最近的回复容器
                const repliesContainer = this.closest('.message-card, .reply-card').querySelector('.replies-container');
                if (!repliesContainer) return;
                
                // 找到或创建回复表单
                let replyForm = repliesContainer.querySelector('.reply-form');
                if (!replyForm) {
                    // 克隆模板表单
                    const template = document.createElement('div');
                    template.className = 'reply-form';
                    template.innerHTML = `
                        <textarea class="form-control" placeholder="请输入您的回复..."></textarea>
                        <div class="d-flex gap-2">
                            <button class="btn btn-primary btn-sm">发送回复</button>
                            <button class="btn btn-secondary btn-sm cancel-reply">取消</button>
                        </div>
                    `;
                    repliesContainer.appendChild(template);
                    replyForm = template;
                    
                    // 为取消按钮添加事件
                    replyForm.querySelector('.cancel-reply').addEventListener('click', function() {
                        replyForm.remove();
                    });
                    
                    // 为发送按钮添加事件
                    replyForm.querySelector('.btn-primary').addEventListener('click', function() {
                        const textarea = replyForm.querySelector('textarea');
                        const content = textarea.value.trim();
                        
                        if (content) {
                            // 创建新回复
                            const newReply = document.createElement('div');
                            newReply.className = 'reply-card';
                            newReply.innerHTML = `
                                <div class="reply-header">
                                    <div class="reply-author">我 (当前用户)</div>
                                    <div class="reply-time">刚刚</div>
                                </div>
                                <div class="reply-content">${content}</div>
                                <div class="reply-actions">
                                    <a href="#" class="action-link">
                                        <i class="far fa-thumbs-up"></i>
                                        <span>0</span>
                                    </a>
                                    <a href="#" class="action-link reply-btn">
                                        <i class="far fa-reply"></i>
                                        <span>回复</span>
                                    </a>
                                </div>
                            `;
                            
                            // 添加到回复容器
                            repliesContainer.insertBefore(newReply, replyForm);
                            
                            // 清空并隐藏回复框
                            textarea.value = '';
                            replyForm.remove();
                            
                            // 为新回复的回复按钮添加事件
                            newReply.querySelector('.reply-btn').addEventListener('click', function(e) {
                                e.preventDefault();
                                // 这里可以实现嵌套回复功能
                                alert('嵌套回复功能');
                            });
                        }
                    });
                }
                
                // 显示回复表单并聚焦
                replyForm.classList.remove('d-none');
                replyForm.querySelector('textarea').focus();
            });
        });
        
        // 图片预览功能
        document.querySelectorAll('.gallery-image').forEach(image => {
            image.addEventListener('click', function() {
                const imgSrc = this.querySelector('img').src;
                const previewImg = document.getElementById('previewImage');
                previewImg.src = imgSrc;
                previewImg.alt = this.querySelector('img').alt;
                
                // 显示模态框
                const imageModal = new bootstrap.Modal(document.getElementById('imageModal'));
                imageModal.show();
            });
        });
        
        // 投标表单验证
        document.querySelector('#bidModal .btn-primary').addEventListener('click', function() {
            const amount = document.getElementById('bidAmount').value;
            const deliveryTime = document.getElementById('deliveryTime').value;
            const description = document.getElementById('bidDescription').value;
            const agreeTerms = document.getElementById('agreeTerms').checked;
            
            let isValid = true;
            let errorMessage = '';
            
            if (!amount || amount < 1) {
                isValid = false;
                errorMessage += '请输入有效的投标金额\n';
            }
            
            if (!deliveryTime) {
                isValid = false;
                errorMessage += '请选择预计完成时间\n';
            }
            
            if (!description.trim()) {
                isValid = false;
                errorMessage += '请填写投标说明\n';
            }
            
            if (!agreeTerms) {
                isValid = false;
                errorMessage += '请阅读并同意相关协议\n';
            }
            
            if (isValid) {
                // 提交表单逻辑
                alert('投标提交成功！');
                const bidModal = bootstrap.Modal.getInstance(document.getElementById('bidModal'));
                bidModal.hide();
            } else {
                alert(errorMessage);
            }
        });
        
        // 点赞功能
        document.querySelectorAll('.action-link').forEach(link => {
            if (link.querySelector('.fa-thumbs-up')) {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const countElem = this.querySelector('span');
                    let count = parseInt(countElem.textContent);
                    
                    if (this.classList.contains('liked')) {
                        this.classList.remove('liked');
                        countElem.textContent = count - 1;
                    } else {
                        this.classList.add('liked');
                        countElem.textContent = count + 1;
                    }
                });
            }
        });
    </script>
</body>
</html>
    
